<script>
import EzViewerBuilder from "@/comps/viewer/EzViewerBuilder";
import EzViewer from "@/comps/viewer/EzViewer.vue";
import EzListViewer from "@/comps/list/EzListViewer.vue";
import listBuilder from "@/comps/list/listBuilder";
import apiInquiry from "./apiSellOrder";
import apiInquiryProduct from "@/pages/v1/erp/InquiryProduct/js/apiInquiryProduct";
import TitleA from "@/comps/comm/TitleA.vue";
import apiSellOrder from "./apiSellOrder";
import apiSellOrderProduct from "@/pages/v1/erp/SellOrderProduct/js/apiSellOrderProduct";
import apiSellOrderPayment from "@/pages/v1/erp/SellOrderPayment/js/apiSellOrderPayment";

export default {
  name: "ViewerSellOrder",
  components: {TitleA, EzListViewer, EzViewer},
  props: {
    model: {id:0},
  },
  data() {
    let vb = EzViewerBuilder()
    vb.add("title", "单据主题", 7).setViewIsText()
    vb.add("sn", "单据编号", 3).setViewIsText().setViewCopy()
    vb.add("formEmp", "制单人", 2).setViewIsObjectName()

    vb.add("payType", "付款方式", 2).setViewIsObjectName()
    vb.add("deliver", "交货地点", 4).setViewIsText()
    vb.add("contactEmp", "业务员", 2).setViewIsObjectName()
    vb.add("contact", "联系人", 2).setViewIsText()
    vb.add("contactPhone", "联系电话", 2).setViewIsText()

    vb.add("num", "数量", 2).setViewIsText()
    vb.add("money", "金额", 10).setViewIsText()

    vb.add("note", "备注", 12).setViewIsText().setViewSpanSm(12)

    vb.add("status", "状态", 2).setViewIsStatus()
    vb.add("approvalSate", "评审状态", 2).setViewIsText()
    vb.add("approvalStage", "评审环节", 2).setViewIsText()
    vb.add("isConfirm", "是否生效", 2).setViewIsBool()
    vb.add("isCancel", "是否取消", 2).setViewIsBool()
    vb.add("isClose", "是否关闭", 2).setViewIsBool()

    vb.add("formAt", "制单时间", 2).setViewIsDate()
    vb.add("confirmAt", "生效时间", 2).setViewIsDate()
    vb.add("createAt", "创建时间", 2).setViewIsDateTime()
    vb.add("updateAt", "更新时间", 2).setViewIsDateTime()
    vb.add("createEmp", "创建人", 2).setViewIsObjectName()
    vb.add("", "", 2).setViewIsBlank()

    let lb = listBuilder()
    lb.add("id", "#", 80)
    // lb.add("belongTo","询价单",180).setListIsObject("title")
    lb.add("product", "产品", 180).setListIsObjectName()
    lb.add("num", "数量", 80)
    lb.add("unit", "单位", 80).setListIsObjectName()
    lb.add("taxRate", "税率", 180).setListIsObjectName()
    lb.add("price", "单价", 180)
    lb.add("money", "总价", 180)
    lb.add("note", "备注", 0)
    lb.add("row", "RN", 80)
    lb.add("belongToId", "订单", 70)

    let lb_pay = listBuilder()
    lb_pay.add("id","#",80)
    lb_pay.add("type","回款类型",180).setListIsObjectName()
    lb_pay.add("applyEmp","登记人",120).setListIsObjectName()
    lb_pay.add("money","回款金额",120)
    lb_pay.add("payAt","回款时间",180).setListIsDateTime()
    // lb_pay.add("payEmp","付款人",120).setListIsObjectName()
    lb_pay.add("isPay","是否回款",90).setIsSwitch()
    lb_pay.add("isLock","是否锁定",90).setIsSwitch()

    return {
      items: vb.items,
      curTab: "main",
      //列表数据
      confList: lb.headers,
      data: [],
      confPayList: lb_pay.headers,
      payLog: [],
      inSideModel: null,
    }
  },
  mounted() {
    this.getData()
    this.getProduct()
    this.getPayment()
  },
  methods: {
    getData() {
      apiSellOrder.findBy({
        _where: {id: this.model.id},
        _dumps: ["payType", "contactEmp", "status", "formEmp", "createEmp"],
        page: 1, limit: 1,
      }, res => {
        this.inSideModel = res[0]
      })
    },
    getProduct() {
      apiSellOrderProduct.findBy({
        _where: {belongToId: this.model.id},
        _dumps: ["belongTo", "product", "unit", "taxRate"],
        page: 1, limit: 0,
      }, res => {
        this.data = res
      })
    },
    getPayment() {
      apiSellOrderPayment.findBy({
        _where: {belongToId: this.model.id},
        _dumps: ["payEmp","applyEmp","type"],
        page: 1, limit: 0,
      }, res => {
        this.payLog = res
      })
    }
  }
}
</script>

<template>
  <div class="pad5" v-if="inSideModel">
    <title-a class=" fs8">采购订单基础信息</title-a>
    <mu-row class="bdtso bdlso marlr5 mart10" fill :gutter="true" align-items="stretch">
      <mu-col fill class="pad3 bcf bdrso bdbso" :span="item.span" v-for="item in items" :key="item.key">
        <div class="fwb fs9 tar padr3" style="width: 80px;" v-show="item.type!=='blank'">{{ item.label }}:</div>
        <div class="flex1">
          <EzViewer :config="item" :model="inSideModel"></EzViewer>
        </div>
      </mu-col>
    </mu-row>
    <title-a class="mart20 fs8">采购明细列表</title-a>
    <mu-data-table stripe :columns="confList" :data="data" rowKey="id">
      <template slot-scope="scope">
        <td :align="col.align" v-for="col in confList" :key="`${scope.row.id}${col.name}`">
          <!--这个ID只是一个自定义的示例-->
          <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
          <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
        </td>
      </template>
    </mu-data-table>
    <title-a class="mart20 fs8">付款记录</title-a>
    <mu-data-table stripe :columns="confPayList" :data="payLog" rowKey="id">
      <template slot-scope="scope">
        <td :align="col.align" v-for="col in confPayList" :key="`${scope.row.id}${col.name}`">
          <!--这个ID只是一个自定义的示例-->
          <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
          <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
        </td>
      </template>
    </mu-data-table>
  </div>
</template>

<style scoped>

</style>